<template>
    <div class="tabs-item" :class="itemClass" @click="onClick" :disable="disable">
        <slot></slot>
    </div>
</template>

<script lang="ts">
  import Vue from "vue";
  import {Component, Inject, Prop} from "vue-property-decorator";

  @Component
  export default class TabsItem extends Vue {
    @Prop({type: String, required: true}) name: string;
    @Prop({type: Boolean, default: false}) disable: boolean;
    @Inject() readonly eventBus;
    active: boolean = false;

    get itemClass() {
      return {[`active`]: this.active};
    }

    created() {
      this.eventBus.$on("update:selected-nav", (tabName) => {
        return this.active = this.name === tabName;
      });
    }


    onClick() {
      if (this.disable) {
        return;
      }
        this.eventBus?.$emit("update:selected-nav", this.name, this);
    }
  }
</script>

<style lang="scss" scoped>
    $blue: royalblue;
    .tabs-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 1em;
        cursor: pointer;

        &.active {
            color: royalblue;
            fill: royalblue;
        }

        &[disable] {
            cursor: not-allowed;
            color: #eee;
        }

    }


</style>